<template>
    <div>
        <h1 style="background-color:dimgrey; height: 40px;"><p align="center">房号列表</p></h1>
    编号:<input type="text" v-model="info.Id">
    房号:<input type="text" v-model="info.HouseNumName">
    <input type="button" value="查询" class="btn btn-primary" @click="show">
    <input type="button" value="批量删除" class="btn btn-danger" @click="deleall">
    <input type="button" value="批量启用" class="btn btn-primary" @click="upstateall(1)">
    <input type="button" value="批量禁用" class="btn btn-primary" @click="upstateall(0)">
    <table class="table table-bordered">
        <tbody class="bg-info">
            <tr class="bg-primary">
                <td>
                    <input type="checkbox" v-model="checked" @click="checkall">
                </td>
                <td>编号</td>
                <td>房号</td>
                <td>地址</td>
                <td>电话</td>
                <td>图片</td>
                <td>状态</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list":key="item.Id">
                <td>
                    <input type="checkbox" v-model="ids" :value="item.Id" @change="checkone">
                </td>
                <td>{{item.Id}}</td>
                <td>{{item.HouseNumName}}</td>
                <td>{{item.Addres}}</td>
                <td>{{item.Phone}}</td>
                <td><img :src="item.Photo" width="50" height="50"></td>
                <td>{{item.State==1?'启用':'禁用'}}</td>
                <td>{{moment(item.CreateTime).format('YYYY-MM-DD')}}</td>
                <td>
                    <input type="button" value="删除" class="btn btn-danger" @click="dele(item.Id)">
                    <input type="button" value="编辑" class="btn btn-success" @click="">
                    <input type="button" value="启用" class="btn btn-primary" v-if="item.State==0" @click="upstate(item.Id,1)">
                    <input type="button" value="禁用" class="btn btn-primary" v-if="item.State==1" @click="upstate(item.Id,0)">
                </td>
            </tr>
        </tbody>
    </table>
    <span>共<b>{{data.totalCount}}</b>条</span>
    <span>每页<b>{{info.pagesize}}</b>条</span>
    <span>共<b>{{info.pageindex}}/{{data.totalPage}}</b>页</span>

    <input type="button" value="首页" @click="Fenpage(1)">
    <input type="button" value="上一页" @click="Fenpage(info.pageindex-1)">
    <span v-for="item in data.totalPage" @click="Fenpage(item)">{{item}}</span>
    <input type="button" value="下一页" @click="Fenpage(info.pageindex+1)">
    <input type="button" value="尾页" @click="Fenpage(data.totalPage)">

    <input type="number" v-model="info.pageindex">
    <input type="button" value="跳转" @click="Fenpage(info.pageindex)">

    <select v-model="info.pagesize" @change="show">
        <option v-for="item in arr" :value="item">每页{{item}}条</option>
    </select>

    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute} from 'vue-router';
const route=useRoute();
const router=useRouter();
import{useStore}from '@/stores/user';
const a=useStore();

let info:any=reactive({
    pageindex:1,
    pagesize:2,
    Id:'',
    HouseNumName:''
})

let data:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[]
})

onMounted(()=>{
    if(a.userinfo.Id){

        getlist();
    }
   else{
     router.push('/login');
   }
})
//===========分页==============
const Fenpage=(num:any)=>{
    if(num>=1 && num<=data.totalPage){
        info.pageindex=num;
        getlist();
    }
    else{
        alert('超出页码范围');
        return;
    }
}
let arr:any=ref([2,3,4,5,6]);
const show=()=>{
    info.pageindex=1;
    getlist();
}
//==============全选/反选=========
let checked:any=ref(false);
let ids:any=ref([]);

const checkall=()=>{
    checked.value=!checked.value;
    if(checked.value==true){
        ids.value=data.list.map((item:any)=>{
            return item.Id;
        })
    }
    else{
        ids.value=[];
    }
}
const checkone=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//===============列表===============
const getlist=()=>{
    axios({
        url:'https://localhost:7097/api/House/GetAllHouseNum',
        method:'get',
        params:info,
    })
    .then(res=>{
        console.log(res);
        Object.assign(data,res.data);
    })
}
//================单个删除==============
const dele=(id:any)=>{
  if(confirm('确认删除吗?')){
    axios({
        url:'https://localhost:7097/api/House/Delhose',
        method:'delete',
        params:{
            ids:id
        }
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('删除成功');
            getlist();
        }
        else{
            alert('删除失败');
        }
    })
  }
}
//==================批量删除=====================
const deleall=()=>{
    if(confirm('确认删除吗?')){
    axios({
        url:'https://localhost:7097/api/House/Delhose',
        method:'delete',
        params:{
            ids:ids.value.toString(),
        }
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('删除成功');
            checked.value=false;
            getlist();
        }
        else{
            alert('删除失败');
        }
    })
  }
}
//=======================单个修改状态====================
const upstate=(id:any,state:any)=>{
    if(confirm('确认修改吗?')){
    axios({
        url:'https://localhost:7097/api/House/Upstate',
        method:'put',
        params:{
            ids:id,
            state:state
        }
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            getlist();
        }
        else{
            alert('修改失败');
        }
    })
  }
}
//=================批量修改状态=============
const upstateall=(state:any)=>{
    if(confirm('确认修改吗?')){
    axios({
        url:'https://localhost:7097/api/House/Upstate',
        method:'put',
        params:{
            ids:ids.value.toString(),
            state:state
        }
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            checked.value=false;
            ids.value=false;
            getlist();
        }
        else{
            alert('修改失败');
        }
    })
  }
}
//==================================
</script>

<style scoped>
span{
   margin: 0 10px;
}
b{
    color: red;
}
input{
    margin: 0 5px;
}
</style>